import React from 'react';
import {View, StyleSheet, Platform, StatusBar, Text, Image, TouchableOpacity,ColorPropType} from 'react-native';

const propTypes = require('prop-types');

export default class NavigationBar extends React.Component {

    propTypes: {
        onSearchClick: propTypes.func,
        onMenuClick: propTypes.func,
        navigationBackgroundColor: ColorPropType,
        title: PropTypes.string,
        showSearchView: PropTypes.bool
    };

    render() {
        let showSearchView = this.props.showSearchView;
        let onSearchClick = this.props.onSearchClick;
        let onMenuClick = this.props.onMenuClick;
        let navigationBackgroundColor = this.props.navigationBackgroundColor ? this.props.navigationBackgroundColor : 'steelblue';
        let title = this.props.title ? this.props.title : 'Title';
        return <View style={[styles.container, {backgroundColor: navigationBackgroundColor}]}>
            <View style={{height: Platform.OS === 'ios' ? 20 : 0,}}>
                <StatusBar hidden={false} barStyle="light-content"/>
            </View>
            <View style={styles.innerContainer}>
                <View/>
                <View style={styles.middleTextWrapper}>
                    <Text style={styles.middleTextStyle}>{title}</Text>
                </View>

                <View style={styles.imageContainer}>
                    {() => {
                        if (showSearchView) {
                            return <TouchableOpacity onPress={onSearchClick}>
                                <Image style={styles.imageStyle}
                                       source={require('../../res/images/ic_search_white_48pt.png')}
                                />
                            </TouchableOpacity>
                        }
                    }
                    }
                    <TouchableOpacity onPress={onMenuClick}>
                        <Image style={styles.imageStyle}
                               source={require('../../res/images/ic_more_vert_white_48pt.png')}/>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    }
}

let styles = StyleSheet.create({

    container: {
        flexDirection: 'column',
        backgroundColor: 'steelblue',
    },
    innerContainer: {
        flexDirection: 'row',
        height: 42,
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    imageContainer: {
        flexDirection: 'row',
        marginRight: 10
    },
    imageStyle: {
        height: 24,
        width: 24

    },
    middleTextStyle: {
        color: '#fff',
        fontSize: 15
    },

    middleTextWrapper: {
        alignItems: 'center',
        position: 'absolute',
        left: 0,
        right: 0,
    }


});